<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="include :: header('新增纪检监察干部违纪违法案件情况')" />
</head>
<style>
.form-control-TreatmentMeasure {
    background: #FFFFFF none;
    border: 1px solid #e5e6e7;
    border-radius: 4px;
    color: inherit;
    display: block;
    padding: 3px 6px 4px;
    -webkit-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s  ease-in-out 0s;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s  ease-in-out 0s;
    width: 55px;
    height: 31px;
    font-size: 14px;
}

    </style>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-templatetable4-add">
            <input id="progressId" name="workProgress.progressId" th:value="${workProgress.progressId}" type="hidden">
            <input id="status" name="workProgress.status" th:value="${workProgress.status}" type="hidden">
            <h4 class="form-header h4">纪检监察干部违纪违法案件情况</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus">
                            增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus">
                            删除</i></button>
                    <!-- <div class="col-sm-12 select-table table-striped" > -->
                    <div style="overflow:scroll;"></div>
                        <table id="bootstrap-table"></table>
                    </div>
                    </br>
                    <p style="color: red">填表说明：</p>
                    <p style="color: red"> 1. 根据《通知》“一（2）”项要求，本表只填写本级和下级纪检监察机关（机构）立案审查或公安机关、司法机关立案审查调查的情况。</p>
                    <p style="color: red"> 2.
                        立案和结案都需填写，立案时结案时间填“未结案”：被纪检监察机关（机构）立案时，违纪违法类型根据前期掌握的情况简列，以结案时为准；被公安机关、司法机关立案调查的，违法类型根据公安机关、司法机关调查情况填写。
                    </p>
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">填报单位：</label>
                                <div class="form-control-static" th:text="${workProgress.receiveDept}"></div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">填报人：</label>
                                <div class="form-control-static" th:text="${workProgress.receiveUser}"></div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">填报时间：</label>
                                <div class="form-control-static" th:text="${today}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
                <button type="button" class="btn btn-sm btn-success" onclick="submitHandler('3')"><i
                        class="fa fa-plus"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler('4')"><i
                        class="fa fa-check"></i>上 报</button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
                        class="fa fa-reply-all"></i>关 闭</button>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:src="@{/js/jquery.tmpl.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "work/templatetable4"

        $(function () {
            var options = {
                url: prefix + "/list",
                queryParams: {progressId: $('#progressId').val()},
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input class='form-control' type='hidden' name='workTemplateTable4List[%s].val1' value='%s'>", index, $.table.serialNumber(index));
                        return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'val2',
                    align: 'center',
                    title: '姓名',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val2' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'val3',
                    align: 'center',
                    title: '性别',
                    width: '6',
                    widthUnit: '%',
                    formatter: function (value, row, index) {
                        // var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val3' value='%s'>", index, value);
                        // return html;
                        var data = [{ index: index, type: value }];
		                return $("#selectGender").tmpl(data).html();
                    }
                },
                {
                    field: 'val4',
                    align: 'center',
                    title: '出生年月',
                    width: '7',
                    widthUnit: '%',
                    formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val4' value='%s' placeholder='请选择出生年月' required>", index, value);
							return html;
						}
                },
                {
                    field: 'val5',
                    align: 'center',
                    title: '工作单位',
                    width: '100px',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val5' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'val6',
                    align: 'center',
                    title: '职务',

                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val6' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'val7',
                    align: 'center',
                    title: '职级',

                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val7' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'val8',
                    align: 'center',
                    title: '立案单位',

                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val8' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'val9',
                    align: 'center',
                    title: '违纪类型',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val9' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'val10',
                    align: 'center',
                    title: '案件来源',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val10' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'val11',
                    align: 'center',
                    title: '违法类型',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val11' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'val12',
                    align: 'center',
                    title: '立案时间',
                    width: '100px',
                    formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val12' value='%s' placeholder='请选择立案时间' required>", index, value);
							return html;
						}
                },
                {
                    field: 'val13',
                    align: 'center',
                    title: '结案时间',
                    width: '100px',
                    formatter: function (value, row, index) {
							var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val13' value='%s' placeholder='请选择结案时间' required>", index, value);
							return html;
						}
                },
                {
                    field: 'val14',
                    align: 'center',
                    title: '是否采取留置措施',
                    width: '50%',
                    formatter: function (value, row, index) {
                        // var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val14' value='%s'>", index, value);
                        // return html;
                        var data = [{ index: index, type: value }];
		                return $("#selectTreatmentMeasure").tmpl(data).html();
                    }
                },
                {
                    field: 'val15',
                    align: 'center',
                    title: '简要案情',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val15' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'val16',
                    align: 'center',
                    title: '处理情况',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='workTemplateTable4List[%s].val16' value='%s'>", index, value);
                        return html;
                    }
                }
                ]
            };
            $.table.init(options);
        });

        /* 主子表-提交 */
       /* function submitHandler(index, layero) {
            var data = $("#form-templatetable4-add").serializeArray();
            $.operate.save(prefix + "/add", data);
        }*/
        function submitHandler(status) {
            if ($.validate.form()) {
                var data = $("#form-templatetable4-add").serializeArray()
                $('#status').val(status)
                console.log("data:" + JSON.toString(data) + data);
                console.log("status" + status);
                $.operate.save(prefix + "/add", $("#form-templatetable4-add").serializeArray());
            }
        }

        function addColumn() {
            var count = $("#" + table.options.id).bootstrapTable('getData').length;
            var row = {
                index: $.table.serialNumber(count),
                val1: "",
                val2: "",
                val3: "",
                val4: "",
                val5: "",
                val6: "",
                val7: "",
                val8: "",
                val9: "",
                val10: "",
                val11: "",
                val12: "",
                val13: "",
                val14: "",
                val15: "",
                val16: "",
            }
            sub.addColumn(row);
        }
        // 出生年月
        $("#bootstrap-table").on("post-body.bs.table", function (e, args) {
			$("input[name$='val4']").datetimepicker({
				format: "yyyy-mm",
				minView: "month",
				autoclose: true,
				pickerPosition: 'top-right'
			});
		});

        $("#bootstrap-table").on("post-body.bs.table", function (e, args) {
			$("input[name$='val12']").datetimepicker({
				format: "yyyy/mm/dd",
				minView: "month",
				autoclose: true,
				pickerPosition: 'top-right'
			});
		});

        $("#bootstrap-table").on("post-body.bs.table", function (e, args) {
			$("input[name$='val13']").datetimepicker({
				format: "yyyy/mm/dd",
				minView: "month",
				autoclose: true,
				pickerPosition: 'top-right'
			});
		});
    </script>
</body>

</html>

<!-- 性别 -->
<script id="selectGender" type="text/x-jquery-tmpl">
<div>
    <select class='form-control' name='workTemplateTable4List[${index}].val3'>
        <option value=""></option>
        <option value="0" {{if type==="0"}}selected{{/if}}>男</option>
        <option value="1" {{if type==="1"}}selected{{/if}}>女</option>
    </select>
</div>
</script>

<!-- 留置措施 -->
<script id="selectTreatmentMeasure" type="text/x-jquery-tmpl">
    <div>
        <select class='form-control' name='workTemplateTable4List[${index}].val14'>
            <option value=""></option>
            <option value="0" {{if type==="0"}}selected{{/if}}>是</option>
            <option value="1" {{if type==="1"}}selected{{/if}}>否</option>
        </select>
    </div>
</script>


</script>

